<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:fn="http://java.sun.com/jsp/jstl/functions"
          xmlns:x="http://java.sun.com/jsp/jstl/xml"
          xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
          xmlns:html="http://struts.apache.org/tags-html" version="2.0">

    <jsp:directive.page contentType="text/xml;charset=UTF-8" pageEncoding="UTF-8"/>  

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
          output-encoding="UTF-8"
          title="Demo Tactile | by Isak Rabin" 
          xsi:noNamespaceSchemaLocation="http://www.netbiscuits.com/schema/netbiscuits-tactile.xsd">

        <external file="res/css/custom.css" type="css"/>
        <external file="http://fonts.googleapis.com/css?family=Concert+One" type="css"/>
        <external file="res/js/custom.js" type="script"/>


        <layout id="root" height="parent.height" width="parent.width">

            <layout id="header" height="80" width="parent.width-10" top="5" left="5">
                <view id="view-header">
                    <container>
                        <column>
                            <TEXT id="headerText">
                                <richtext>
                                    Simple Tactile
                                </richtext>
                            </TEXT>
                        </column>
                        <column id="headerRightColumn">
                            
                            
                            <FORM action="http://www.google.com/m/search" id="search" method="GET">
                                <styles> 
                                    <style name="text-align" value="right"/> 
                                    <style name="borders" value="none"/> 
                                    <style name="vertical-align" value="top"/> 
                                </styles> 
                                <row> 
                                    <cell > 
                                        <input name="q" size="50" type="text"/> 
                                        <input type="submit" value="Search"/>
                                    </cell> 
                                </row> 
                            </FORM>
                        </column>
                    </container>
                    <container>
                        <column>
                            <LIST > 
                                <ulist id="navigation"> 
                                    <item href="#" id="news-navigation"> 
                                        <text>News</text> 
                                    </item> 
                                    <item href="#" id="video-navigation"> 
                                        <text>Video</text> 
                                    </item> 
                                </ulist> 
                            </LIST>                            
                        </column>
                    </container>
                </view>		
            </layout>

            <layout id="content" height="parent.height-130" width="parent.width-10" top="85" left="5">
                <layout id="left-content" height="landscape: parent.height, portrait: parent.height*0.7" width="landscape: parent.width*0.7, portrait: parent.width" top="0" left="0">
                    <multiview id="multiview-left-content" swipe="horizontal" width="parent.width*0.8" height="parent.height" top="0" left="parent.width*0.1" position="absolute" overflow="hidden">
                        <c:set var="videoCount" value="${0}"/>
                        <c:forEach var="videoItem" items="${requestScope['videoList']}" begin="0" varStatus="status">
                            <c:set var="showVideo" value="${false}"/>

                            <c:if test="${not empty videoItem and not empty videoItem.thumbnails[1] and not empty videoItem.thumbnails[1].url and (videoCount lt 5)}">
                                <c:set var="showVideo" value="${true}"/>
                            </c:if>

                            <c:if test="${showVideo}">
                                <view id="left-view-content-${videoCount +1}">
                                    
                                    <container id="videoContainer">
                                        <column>                                            
                                            <TEXT>
                                                <headline>${videoItem.title}</headline>
                                                <richtext/>
                                            </TEXT>

                                            <IMAGE>
                                                <img convert="true" format="PNG" src="${videoItem.thumbnails[1].url}" id="thumbnail" />  
                                            </IMAGE>
                                            
                                            <TEXT>
                                                <headline/>
                                                <text>${videoItem.summary}</text>
                                            </TEXT>
                                        </column>
                                    </container>
                                </view>     

                                <c:set var="videoCount" value="${videoCount +1}"/>
                            </c:if>

                        </c:forEach>                
                    </multiview>
                </layout>
                <layout id="right-content" height="landscape: parent.height, portrait: parent.height*0.3" width="landscape:parent.width*0.3, portrait: parent.width" top="landscape: 0, portrait: parent.height * 0.7" left="landscape: parent.width*0.7, portrait: 0">
                    <layout id="top-right-content" height="landscape: parent.height*0.5, portrait: parent.height" width="landscape: parent.width, portrait: parent.width * 0.5" left="0" top="0">
                        <view id="right-view-content">
                            <container>
                                <column>								
                                    <TEXT>
                                    <richtext>
                                        [b]Top Right Content[/b]
                                    </richtext>
                                    </TEXT>
                                </column>
                            </container> 			
                        </view>
                    </layout>
                    <layout id="bottom-right-content" height="landscape: parent.height*0.5, portrait: parent.height" width="landscape: parent.width, portrait: parent.width*0.5" left="landscape:0, portrait: parent.width*0.5" top="landscape: parent.height*0.5, portrait: 0">
                        <view id="right-view-content">
                            <container>
                                <column>
                                    <TEXT>
                                    <richtext>
                                        [b]Bottom Right Content[/b]
                                    </richtext>
                                    </TEXT>
                                </column>
                            </container>
                        </view>
                    </layout>
                </layout>
            </layout>

            <layout id="footer" height="40" width="parent.width-10" top="parent.height-45" left="5">
                <view id="view-footer">
                    <container>
                        <column>
                            <TEXT>
                            <richtext>
                                [b]Footer[/b]
                            </richtext>
                            </TEXT>
                        </column>
                    </container>
                </view>
            </layout>

        </layout>

    </page>    
</jsp:root>